import React, { useLayoutEffect } from 'react';
import { View, Text, ScrollView, router, hideMenuButton, publishDps, Image } from '@ray-js/ray';
import clsx from 'clsx';
import { useDevice, useProps } from '@ray-js/panel-sdk';
import { useThrottleFn } from 'ahooks';
import { getCachedSystemInfo } from '@/api/getCachedSystemInfo';
import Strings from '@/i18n';
import { useSelector } from 'react-redux';
import { ReduxState } from '@/redux';
import { Switch, NavBar, SwipeCell, CellGroup } from '@ray-js/smart-ui';
import { Cell } from '@/components';
import { decodeScene } from '@/utils';
import res from '../../../public/newImage';
import styles from './index.module.less';
import { VoiceList } from '../Home';

const HeaderHeight = 59;

const sysInfo = getCachedSystemInfo();

export function Home() {
  const deviceName = useDevice(d => d.devInfo.name);

  useLayoutEffect(() => {
    hideMenuButton();
  }, []);

  const handleJump = useThrottleFn(
    (code: string) => {
      router.push(`/${code}`);
    },
    { wait: 80 }
  ).run;

  const onClickLeft = React.useCallback(() => {
    router.back();
  }, []);

  const scene1 = useProps(props => props.customize_scene_1);
  const scene2 = useProps(props => props.customize_scene_2);
  const scene3 = useProps(props => props.customize_scene_3);
  const scene4 = useProps(props => props.customize_scene_4);
  const scene5 = useProps(props => props.customize_scene_5);
  const scene6 = useProps(props => props.customize_scene_6);
  const scene7 = useProps(props => props.customize_scene_7);
  const scene8 = useProps(props => props.customize_scene_8);

  const sceneList = [scene1, scene2, scene3, scene4, scene5, scene6, scene7, scene8]
    .map((item, index) => {
      return {
        code: `customize_scene_${index + 1}`,
        ...decodeScene(item),
      };
    })
    .filter(item => item.setted !== false);

  return (
    <View className={styles.view}>
      <NavBar
        title={deviceName}
        className={styles.navBar}
        customClass={styles.borBot}
        slot={{
          left: (
            <View className={styles.tabTopIconWrapLeft} onClick={onClickLeft}>
              {['back'].map(item => (
                <Image src={`/newImage/${item}.png`} key={item} />
              ))}
            </View>
          ),
        }}
      />
      <ScrollView
        scrollY
        refresherTriggered
        className={clsx(styles.slideUpContent)}
        style={{
          height: `calc(100vh - ${HeaderHeight}px - ${sysInfo.statusBarHeight}px)`,
          paddingTop: 20,
        }}
      >
        <View
          style={{
            paddingInline: '40rpx',
          }}
        >
          {sceneList.map(item => {
            //  const currenMusic = VoiceList?.[item.musicSet]?.[]
            const CurrentMusic = VoiceList[item.musicSet]?.find(e => e.code === item.music);

            return (
              <View
                className={styles.card}
                key={item.code}
                style={{
                  display: 'flex',
                  flexDirection: 'row',
                  justifyContent: 'space-between',
                  alignItems: 'center',
                  paddingInline: '40rpx',
                }}
                onClick={() => {
                  handleJump(`sceneEdit?code=${item.code}`);
                }}
              >
                <View
                  style={{
                    display: 'flex',
                    flexDirection: 'row',
                    justifyContent: 'flex-start',
                    alignItems: 'center',
                  }}
                >
                  <Image
                    src={CurrentMusic?.picActive}
                    style={{
                      width: '40rpx',
                      height: '40rpx',
                      marginRight: '10rpx',
                    }}
                  />
                  <Text
                    style={{
                      color: '#000',
                      fontSize: '24rpx',
                    }}
                  >
                    {Strings.getLang(item.code)}
                  </Text>
                </View>

                <View
                  onClick={event => {
                    publishDps({
                      [item.code]: '',
                    });
                    event?.origin?.stopPropagation?.();
                  }}
                  style={{
                    display: 'flex',
                    justifyContent: 'center',
                    alignItems: 'center',
                  }}
                >
                  <Image src={res.del} className={styles.delPic} />
                </View>
              </View>
            );
          })}
        </View>
      </ScrollView>
    </View>
  );
}

export default Home;
